<script setup lang="ts">
import { generateThemeColors } from '@/core/utils/theme';
import { useSettingsStore } from '@/store';

const settingsStore = useSettingsStore();

const colorArr = ref<{ label: string; value: string }[]>([]);

// 监听主题变化
watch(
  [() => settingsStore.theme, () => settingsStore.themeColor],
  ([newTheme, newThemeColor]) => {
    const colors = generateThemeColors(newThemeColor, newTheme);
    colorArr.value = Object.entries(colors).map((v) => ({ label: v[0], value: v[1] }));
  },
  { immediate: true }
);
</script>

<template>
  <PageCard title="主题颜色">
    <section class="flex flex-wrap">
      <template v-for="color of colorArr" :key="color">
        <span v-ripple class="cursor-pointer p-2px rounded-[var(--border-radius)] color-item hover:scale-110">
          <span
            :style="{ backgroundColor: color.value }"
            :title="color.label"
            class="flex-center w-13 h-8 rounded-[var(--border-radius)]"
          />
        </span>
      </template>
    </section>
  </PageCard>
</template>
